<template>
  <div class="bg">
    <div class="top"></div>
    <!-- 切屏 -->
    <div class="box">
      <van-sticky :container="container" :offset-top="0">
        <div class="top">
          <div class="content">
            <p class="p1">Enjoy Your Life</p>
            <p class="p2">less,but better</p>
            <button>ALIVE</button>
          </div>
          <!-- 显示定位 -->
          <div class="location" @click="changeArea">
            <van-icon name="location-o" color="#fff" />
            <span>{{ areaCity }}</span>
          </div>
          <!-- 弹窗选城市 -->
          <van-popup v-model="showArea" position="bottom">
            <van-area
              :area-list="areaList"
              @confirm="onAreaConfirm"
              @cancel="bindCancel"
              columns-num="2"
            />
          </van-popup>
          <img src="/other/bg.jpg" alt="" />
          <van-nav-bar title="精选周边"> </van-nav-bar>
          <!-- 切换二级路由 -->
          <van-tabs v-model="active">
            <van-tab
              v-for="(i, index) in arr"
              :title="i.title"
              :name="i.name"
              :to="i.path"
              :key="index"
            ></van-tab>
          </van-tabs>
        </div>
      </van-sticky>
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
    <!-- 底部tabbar -->
    <bottom-tabbar />
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import BottomTabbar from "@/components/BottomTabbar.vue";
export default {
  components: { BottomTabbar },
  data() {
    return {
      container: null,
      areaList,
      active: this.$route.path.split("/")[2],
      areaCity: sessionStorage.getItem("city"),
      showArea: false,
      arr: [
        {
          title: "美食推荐",
          path: "/other/food",
          name: "food",
        },
        {
          title: "游玩推荐",
          path: "/other/play",
          name: "play",
        },
        {
          title: "新闻资讯",
          path: "/other/news",
          name: "news",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    changeArea() {
      this.showArea = true;
    },
    bindCancel() {
      this.showArea = false;
    },
    //地区选择
    onAreaConfirm(val) {
      this.showArea = false;
      this.areaCity = val[1].name;
      sessionStorage.setItem("city", this.areaCity);
      history.go(0);
    },
  },
};
</script>

<style lang='scss' scoped>
.bg {
  position: relative;
  .box {
    position: absolute;
    top: 0px;
    width: 100vw;
    border-radius: 20px;
    z-index: 1;
    overflow: hidden;
    .van-nav-bar__content {
      border-radius: 10px 10px 0 0;
    }
    .top {
      width: 100vw;
      background-color: #fff;
      position: fixed;
      z-index: 5;
      .location {
        position: absolute;
        right: 5vw;
        top: 150px;
        span {
          color: #fff;
          font-size: 14px;
        }
      }
      .content {
        position: absolute;
        z-index: 50;
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .p1 {
          color: #fff;
          font-size: 28px;
          font-weight: bold;
          text-align: center;
          margin: 40px 0 0;
        }
        .p2 {
          color: #fff;
          font-size: 14px;
          letter-spacing: 1px;
          text-align: center;
        }
        button {
          margin: 0 auto;
          border: 0;
          width: 80px;
          padding: 5px 8px;
          border-radius: 20px;
          color: #fff;
          font-size: 12px;
          background-color: #f5b400;
        }
      }
      img {
        width: 100%;
        height: 180px;
        border-radius: 0;
        display: block;
      }
    }
  }
}

body {
  background-color: #eee;
}
/*顶部导航栏样式 */
.van-swipe img {
  width: 100%;
}

.van-nav-bar__left span {
  color: white;
}
.van-nav-bar {
  background-color: #fff;
}

.van-nav-bar .van-icon {
  color: #333;
}
::v-deep .van-nav-bar__title {
  color: 333;
  font-size: 18px;
  font-weight: bold;
}

//选中项下划线
::v-deep .van-tabs__line {
  background-color: #f5b400;
}
//选中项字体颜色
::v-deep .van-tab--active {
  color: #f5b400;
}

.van-nav-bar__text {
  color: white;
}

/*轮播图样式 */
.van-swipe-item {
  height: 40vw;
}
.van-swipe__track {
  height: 45w;
}
van-swipe-item img {
  height: 210px;
}
van-swipe-item,
img {
  width: 100%;
  height: 30vh;
  overflow: hidden;
  border-radius: 2vw;
}
</style>
